<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table{
				border: 1px solid red;
				border-collapse: collapse;
				border-spacing: 0;


			}
			th, td{
				padding: 8px 16px;
				border: 1px solid #e9e9e9;
				text-align: left;
			}
			th{
				background-color: #f7f7f7;
				color: #5c6b77;
				font-weight: 600;
			}
		</style>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div class="app">
			<table>
				<thead>
					<tr>
						<th></th>
						<th>姓名</th>
						<th>性别</th>
						<th>年龄</th>
						<th>身高</th>
					</tr>
				</thead>

				<tbody>
					<tr v-for="student, index in students">
						<th>{{index + 1}}</th>
						<th>{{student.name}}</th>
						<th>{{student.sex}}</th>
						<th>{{student.age}}</th>
						<th>{{student.height}}</th>

					</tr>
				</tbody>
			</table>
			<p>学生的平均年龄是：{{get_avg_age | handle2}}</p>
			<p>学生的平均身高是：{{get_avg_height | handle2}}</p>
			<p>年龄大于10岁的学生有：{{get_age_above_ten}}</p>
		</div>
		<script>
			const app = new Vue({
				el: '.app',
				data:{
					students:[
						{
							name: '小红',
							sex: '女',
							age: 10,
							height: 143
						},
						{
							name: '小明',
							sex: '男',
							age: 11,
							height: 140
						},
						{
							name: '小花',
							sex: '女',
							age: 9,
							height: 135
						},
						{
							name: '小强',
							sex: '男',
							age: 9,
							height: 134
						},
						{
							name: '小宝',
							sex: '男',
							age: 5,
							height: 121
						},
						{
							name: '小丽',
							sex: '女',
							age: 15,
							height: 148
						},
						{
							name: '小园',
							sex: '女',
							age: 6,
							height: 123
						},
						{
							name: '小冰',
							sex: '女',
							age: 15,
							height: 172
						},
						{
							name: '小思',
							sex: '女',
							age: 9,
							height: 132
						}
					]
				},
				computed:{

					get_avg_age(){
						return this.students.reduce((m, n)=> m+n.age, 0)/this.students.length
					},
					get_avg_height(){
						return this.students.reduce((m, n)=> m+n.height, 0)/this.students.length
					},
					get_age_above_ten(){
						return this.students.filter(n => n.age>10).map(n => n.name)
					}
				},
				filters:{
					handle2(value){
						return value.toFixed(2)
					}
				}
			})
		</script>
	</body>
</html>
